<template>
  <div id="indexMessageTable">
    <el-dialog
      :title="dialogtitle"
      :visible.sync="dialogVisible"
      width="98%"
      top="20px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      @before-close="dialogClose"
    >
      <Edit :infoid="id" :read-only="readOnly" :feedbackid="feedbackid" :timestamp="timestamp" @dialogHide="dialogHide($event)" />
    </el-dialog>
    <el-alert
      v-if="num"
      :title="'您有'+num+'条新的消息'"
      type="success"
      effect="dark"
      style="margin-bottom:10px;"
    />
    <el-button type="success" style="float:right;margin-left:5px;" size="medium" @click="addnew()">创建消息</el-button>
    <el-button type="primary" style="float:right" size="medium" @click="golist()">查看全部</el-button>
    <el-tabs v-model="activeName" @tab-click="getList">
      <el-tab-pane label="收件箱" name="first">
        <el-table :data="list" style="width: 100%;padding-top: 15px;">
          <el-table-column label="状态" width="50" align="center">
            <template slot-scope="scope">
              <svg-icon icon-class="message" :class-name="scope.row.readed?'readed':'notread'" />
            </template>
          </el-table-column>
          <el-table-column label="标题" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <a class="newstitle" @click="detail(scope.row.id)">{{ scope.row.title }}</a>
            </template>
          </el-table-column>
          <el-table-column label="发件人" width="100" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.sendUserName }}
            </template>
          </el-table-column>
          <el-table-column label="收件时间" width="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.sendTime }}
            </template>
          </el-table-column>
          <el-table-column label="限时办结日期" width="120" align="center">
            <template slot-scope="scope">
              {{ scope.row.limitTime }}
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="发件箱" name="second">
        <el-table :data="list" style="width: 100%;padding-top: 15px;">
          <el-table-column label="状态" width="50" align="center">
            <template slot-scope="scope">
              <svg-icon icon-class="message" :class-name="scope.row.readed?'readed':'notread'" />
            </template>
          </el-table-column>
          <el-table-column label="标题" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <a class="newstitle" @click="detail(scope.row.id)">{{ scope.row.title }}</a>
            </template>
          </el-table-column>
          <el-table-column label="收件人" width="100" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.receiveUserName }}
            </template>
          </el-table-column>
          <el-table-column label="发件时间" width="150" align="center">
            <template slot-scope="scope">
              {{ scope.row.sendTime }}
            </template>
          </el-table-column>
          <el-table-column label="限时办结日期" width="120" align="center">
            <template slot-scope="scope">
              {{ scope.row.limitTime }}
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Edit from '@/views/message/components/ArticleDetail.vue'
import { transactionList } from '@/api/remote-search'

export default {
  components: {
    Edit
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    },
    orderNoFilter(str) {
      return str.substring(0, 30)
    }
  },
  data() {
    return {
      feedbackid: null,
      dialogVisible: false,
      dialogtitle: '',
      readOnly: true,
      id: 0,
      timestamp: '',
      num: 0,
      activeName: 'first',
      list: [
        // { type: '督导', title: '某某某非法集资案1', date: '2021-06-01', readed: false },
        // { type: '审核未通过', title: '某某某非法集资案2', date: '2021-05-29', readed: true },
        // { type: '督导', title: '某某某非法集资案3', date: '2021-05-21', readed: true }
      ]
    }
  },
  created() {
    this.getNum()
    this.getList()
    // this.fetchData()
  },
  methods: {
    golist() {
      this.$router.push('/message/maillist')
    },
    dialogHide(flag) {
      console.log(flag)
      this.dialogVisible = false
      this.getNum()
      this.getList()
      if (flag) {
        this.addnew(flag)
      }
    },
    detail(id) {
      this.getNum()
      this.getList()
      this.id = id
      this.readOnly = true
      this.dialogtitle = '查看'
      this.dialogVisible = true
      this.timestamp = new Date().getTime()
    },
    dialogClose() {
      this.$nextTick(() => {
        this.getNum()
        this.getList()
      })
    },
    addnew(feedbackid) {
      this.id = 0
      this.feedbackid = feedbackid
      this.readOnly = false
      this.dialogtitle = '新建'
      this.dialogVisible = true
      this.timestamp = new Date().getTime()
    },
    getNum() {
      this.$http
        .get('/api/busMessage/getUnreadCount')
        .then(response => {
          if (response.data.success === true) {
            this.num = response.data.result
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    getList() {
      const para = { pageNum: 1, pageSize: 3 }
      if (this.activeName === 'first') {
        para.queryReceive = true
      } else {
        para.querySend = true
      }
      this.$http
        .post('/api/busMessage/queryByPage', para)
        .then(response => {
          if (response.data.success === true) {
            this.list = response.data.result.records
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    fetchData() {
      transactionList().then(response => {
        this.list = response.data.items.slice(0, 8)
      })
    }
  }
}
</script>

<style scoped>
.readed {
  color:#ccc
}
.notread{
  color:#E69900
}
</style>
<style>
#indexMessageTable .el-tabs__header{
  margin-right: 200px !important;
}
.newstitle{
  text-decoration: none;
}
.newstitle:hover{
  text-decoration: underline;
  color: #f60;
}
</style>
